<template>
  <div class="goods-container">
       <Shopcar/>
    <!-- 左侧导航 -->
    <div class="goods-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.name"
          v-for="item in x_infolist"
          :key="item.name"
          @click="clickLeft"
        />
      </van-sidebar>
    </div>
    
    <!-- 右侧列表 -->
    <div class="goods-right">
      <!-- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。 -->
      <div>
        <div
          class="goods_right_list"
          v-for="(item, index) in x_infolist"
          :key="index"
          :id="index"
        >
          <!-- 分类名字 -->
          <div class="right_list_title">{{ item.name }}</div>
          <!-- 商品信息 -->
          <div
            class="right_list_main"
            v-for="(child, i) in item.foods"
            :key="i"
          >
            <!-- 店铺头像 -->
            <div class="list_title_left">
              <img
                :src="'http://127.0.0.1:5000/imgs/' + child.imgUrl"
                alt="图片暂无"
                @click="clickChild(child)"
              />
              <!-- <img src="@/assets/images/1.jpg" alt="图片暂无" /> -->
            </div>
            <div class="list_title_right">
              <p>{{ child.name }}</p>
              <span>特惠</span>
              <p>
                月售<span>{{ child.sellCount }}</span
                >份&nbsp;好评度<span>{{ child.rating }}</span
                >%
              </p>
              <p>
                <span class="price"
                  >&yen;{{ child.price.toFixed(2) }}&nbsp;
                  <del>&yen;{{ (child.price + 5).toFixed(2) }}</del></span
                >
                <span class="Num">
                  <span
                    @click="$store.commit('addNum', { id: child.id, num: -1 })"
                    v-show="child.num>0"
                    ><span>-</span></span
                  >
                  <p class="quantity"   v-show="child.num>0">{{ child.num }}</p>
                  <span
                    @click="$store.commit('addNum', { id: child.id, num: 1 })"

                    >+</span
                  >
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  
  </div>
  
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_getgoodsList } from "@/apis/goods";
import { Ilist, Igoods, Iratings } from "../../interface/goodsinterface";
import BS from "better-scroll"; //引入better-scroll
import Shopcar from "../main_modules/Shopcar.vue"

@Component
({
  //注册自定义组件------购物车点击组件
  components:{
      Shopcar,
  }

})
export default class Goods extends Vue {
  activeKey: number = 0; //激活索引
  // value: number = 0; //步计器

  rightbs: any; //BS的对象

  async created(): Promise<void> {
    let res = await $_getgoodsList();
    // console.log(res,"res");
    this.$store.commit("initInfolist", res.data.goodsList);

    // for(let obj of res.data.goodsList){
    //   for(let child of obj.foods){
    //       child.imgUrl=child.imgUrl.replace('127.0.0.1','192.168.137')
    //   }
    // }



  }

  mounted(): void {
    //初始化右侧为滚动面板
    let dom: any = document.querySelector(".goods-right");
    this.rightbs = new BS(dom, { click: true, probeType: 3 }); //click:true解决better-scroll的蒙层阻止点击事件  // probeType:3是第三者种滑动方式
    //better-scroll绑定事件需要.on(),若果是scroll事件,还需要额外开启pebetype:3属性,才能实时派发
    this.rightbs.on("scroll", (pos: any) => {
      let Y_ = Math.abs(pos.y);
      // console.log(Y_,"滚动了");
      // console.log(this.domheight,'分类的高度数组');

      for (let obj of this.domheight)
        if (Y_ >= obj.min && Y_ < obj.max) {
          //匹配到某个分类区间,设置左侧索引
          this.activeKey = obj.index;
        }
    });

    // 1.兼容性,如果浏览器不支持H5新特性,无法使用选择器
    // 2.querySelector系列无法支持特殊字符作为选择器
    // HTML5 才有 ->document.querySelector() document.querySelectorAll();
  }

  get domheight(): Array<any> {
    // get domheight():Array<number | undefined>{
    // let arr:Array<number | undefined>=[];
    let arr: Array<any> = [];

    //[418, 418, 808, 418, 808, 938, 1328, 418 ]
    //第一次高度的结果,不能直接使用
    //第二次数据加工
    //[{min:0,max:418,index:0},{min:418,max:418+418,index:1},{min:418+418,max:min+自己高度,index:2}...]
    //min:之前div高度的总合,max:总和+自己高度 index:自增
    let total: number = 0; //之前div高度的总合
    this.x_infolist.forEach((item, i) => {
      //  arr.push(document.getElementById(i+"")?.offsetHeight);
      let curheight: any = document.getElementById(i + "")?.offsetHeight;
      arr.push({ min: total, max: total + curheight, index: i });
      total += curheight;
    });

    return arr;
  }

  //vuex的共享大数组
  get x_infolist(): Array<Igoods> {
    //返回个共享大数组---约束过的
    return this.$store.state.infolist;
  }

  //店铺详情跳转
  clickChild(child: Igoods): void {
    this.$router.push({ path: "/detail", query: child });
  }

  //左侧导航栏
  clickLeft(i: number): void {
    //  document.querySelector(".goods-right")?.scrollTo(0,200);
    this.rightbs.scrollToElement(document.getElementById(i + ""), 600);
  }
}
</script>

<style scoped lang='scss'>
// $sidebar-active-color:rgb(81, 36, 246);

.van-sidebar-item--select::before {
  background-color: rgb(255, 195, 0);
}

.goods-container {
  // flex: 1;
  height: 100%;
  display: flex;
  overflow: hidden;

  //左侧导航
  .goods-left {
    // height: 100%;
    overflow: scroll;
    width: 80px;
  }
  //隐藏左侧导航滚动条
  .goods-left::-webkit-scrollbar {
    display: none;
  }

  //右侧导航
  .goods-right {
    overflow: scroll;
    flex: 1;
    
  }

  //隐藏右侧滚动条
  .goods-right::-webkit-scrollbar {
    display: none;
  }
}

//右侧列表
.goods_right_list {
  //标题
  .right_list_title {
    box-sizing: border-box;
    font-size: 14px;
    background-color: rgb(236, 236, 236);
    line-height: 28px;
    border-left: 2px solid rgb(211, 211, 211);
    padding-left: 10px;
  }

  //商品信息
  .right_list_main {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 1px solid #f8f8f8;
  }
  //商品图片
  .list_title_left {
    width: 80px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: rgb(73, 60, 60);
    img {
      height: 60px;
      width: 60px;
      border-radius: 2px;
      margin-top: -12px;
    }
  }
  //标题信息
  .list_title_right {
    padding: 10px 15px 10px 0;
    // background-color: rgb(211, 130, 130);
    height: 120px;
    box-sizing: border-box;

    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    & > p:nth-of-type(1) {
      font-weight: bold;
      font-size: 13px;
    }
    & > span:nth-of-type(1) {
      display: inline-block;

      background-color: rgb(241, 241, 241);
      font-size: 8px;
      width: 30px;
      text-align: center;
      line-height: 20px;
      border-radius: 2px;
      font-weight: bold;
    }
    & > p:nth-of-type(2) {
      // font-weight: bold;

      font-size: 10px;
      color: #686868;
    }
    & > p:nth-of-type(3) {
      // font-weight: bold;
      font-size: 10px;
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;

      // flex-wrap:nowrap;
      .price {
        font-size: 16px;
        color: rgb(255, 0, 0);
        font-weight: bold;
      }
      del {
        color: #686868;
        font-size: 12px;
        font-weight: normal;
      }

      .Num {
        // background-color: rgb(173, 32, 32);
        display: inline-block;
        height: 24px;

        span {
          display: inline-block;

          width: 20px;
          height: 20px;
          line-height: 20px;
          font-size: 18px;
          // vertical-align: baseline;
          background-color: rgb(255, 195, 0);
          color: #fff;
          text-align: center;
          border-radius: 50%;
        }
        .quantity {
          display: inline-block;
          // width: 20px;
          height: 20px;
          margin: 0 5px;
          vertical-align: middle;
        }
        & > span:nth-of-type(1) {
          // line-height: 20px;

          span {
            vertical-align: top;
            // color: rgb(158, 68, 68);
            // margin-top: -1px;
            box-sizing: border-box;
            border: 1px solid rgb(255, 195, 0);
            background: rgb(255, 255, 255);
            color: rgb(255, 195, 0);
            line-height: 16px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>